<script>
    import { onMount, onDestroy } from 'svelte';
  
    export let images = [];
    export let visible = false;
    
    let currentIndex = 0;
  
    function closePreview() {
      visible = false;
    }
  
    async function downloadImage() {
      if (images[currentIndex]) {
        try {
          const response = await fetch(images[currentIndex].url);
          if (!response.ok) throw new Error('下载失败');
          
          const blob = await response.blob();
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = url;
          link.download = images[currentIndex].name || `image-${currentIndex + 1}.jpg`;
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          window.URL.revokeObjectURL(url);
        } catch (error) {
          console.error('下载失败:', error);
          alert('下载失败，请重试');
        }
      }
    }
  
    function prevImage() {
      currentIndex = currentIndex > 0 ? currentIndex - 1 : images.length - 1;
    }
  
    function nextImage() {
      currentIndex = currentIndex < images.length - 1 ? currentIndex + 1 : 0;
    }
  
    function selectImage(index) {
      currentIndex = index;
    }
  
    function handleKeydown(event) {
      if (!visible) return;
      
      switch(event.key) {
        case 'Escape':
          closePreview();
          break;
        case 'ArrowLeft':
          prevImage();
          break;
        case 'ArrowRight':
          nextImage();
          break;
      }
    }
  
    function handleOverlayKeydown(event) {
      if (event.key === 'Enter' || event.key === ' ') {
        event.preventDefault();
        closePreview();
      }
    }
  
    onMount(() => {
      document.addEventListener('keydown', handleKeydown);
    });
  
    onDestroy(() => {
      document.removeEventListener('keydown', handleKeydown);
    });
  </script>
  
  {#if visible}
    <div 
      class="image-preview-overlay" 
      role="dialog"
      aria-modal="true"
      aria-label="图片预览"
      tabindex="0"
      on:click={closePreview}
      on:keydown={handleOverlayKeydown}
    >
      <div 
        class="image-preview-container" 
        role="document"
        on:click|stopPropagation
      >
        <!-- 顶部工具栏 -->
        <div class="toolbar">
          <button class="toolbar-btn download-btn" on:click={downloadImage} title="下载">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
              <polyline points="7,10 12,15 17,10"/>
              <line x1="12" y1="15" x2="12" y2="3"/>
            </svg>
            下载
          </button>
          <button class="toolbar-btn close-btn" on:click={closePreview} title="关闭">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="18" y1="6" x2="6" y2="18"/>
              <line x1="6" y1="6" x2="18" y2="18"/>
            </svg>
          </button>
        </div>
  
        <!-- 主图区域 -->
        <div class="main-image-container">
          <!-- 左箭头 -->
          <button class="nav-btn nav-btn-left" on:click={prevImage}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polyline points="15,18 9,12 15,6"/>
            </svg>
          </button>
  
          <!-- 图片显示区域 -->
          <div class="image-display">
            {#if images[currentIndex]}
              <img src={images[currentIndex].url} alt={images[currentIndex].name || `Image ${currentIndex + 1}`} />
            {/if}
          </div>
  
          <!-- 右箭头 -->
          <button class="nav-btn nav-btn-right" on:click={nextImage}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polyline points="9,18 15,12 9,6"/>
            </svg>
          </button>
        </div>
  
        <!-- 缩略图区域 -->
        <div class="thumbnails-container">
          <div class="thumbnails-wrapper">
            {#each images as image, index}
              <div 
                class="thumbnail" 
                class:active={index === currentIndex}
                on:click={() => selectImage(index)}
                role="button"
                tabindex="0"
                on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && selectImage(index)}
              >
                <img src={image.url} alt={image.name || `Thumb ${index + 1}`} />
              </div>
            {/each}
          </div>
        </div>
      </div>
    </div>
  {/if}
  
  <style>
    .image-preview-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      outline: none;
      animation: fadeIn 0.3s ease-out;
    }
  
    .image-preview-container {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 60vw;
      max-width: 800px;
      min-width: 500px;
      background: white;
      display: flex;
      flex-direction: column;
      box-shadow: -5px 0 20px rgba(0, 0, 0, 0.15);
      animation: slideInRight 0.3s ease-out;
    }
  
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  
    @keyframes slideInRight {
      from {
        transform: translateX(100%);
      }
      to {
        transform: translateX(0);
      }
    }
  
    .toolbar {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 16px 20px;
      background: white;
      border-bottom: 1px solid #e5e7eb;
      gap: 12px;
    }
  
    .toolbar-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #f3f4f6;
      border: 1px solid #d1d5db;
      color: #374151;
      padding: 8px 12px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
      font-size: 13px;
    }
  
    .download-btn:hover {
      background: #e5e7eb;
      border-color: #9ca3af;
    }
  
    .close-btn {
      background: transparent;
      border: none;
      padding: 8px;
      color: #6b7280;
    }
  
    .close-btn:hover {
      background: #f3f4f6;
      color: #374151;
    }
  
    .main-image-container {
      flex: 1;
      display: flex;
      align-items: center;
      background: #f9fafb;
      position: relative;
      min-height: 0;
    }
  
    .nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid #e5e7eb;
      border-radius: 50%;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
      z-index: 10;
      color: #374151;
    }
  
    .nav-btn:hover {
      background: white;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
  
    .nav-btn-left {
      left: 20px;
    }
  
    .nav-btn-right {
      right: 20px;
    }
  
    .image-display {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 80px;
      min-height: 0;
    }
  
    .image-display img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      border-radius: 8px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    }
  
    .thumbnails-container {
      background: white;
      border-top: 1px solid #e5e7eb;
      padding: 16px 20px;
    }
  
    .thumbnails-wrapper {
      display: flex;
      gap: 8px;
      justify-content: center;
      flex-wrap: wrap;
      max-width: 100%;
      overflow-x: auto;
      padding: 4px 0;
    }
  
    .thumbnail {
      width: 50px;
      height: 50px;
      border-radius: 6px;
      overflow: hidden;
      border: 2px solid transparent;
      cursor: pointer;
      transition: all 0.2s;
      flex-shrink: 0;
      outline: none;
    }
  
    .thumbnail:hover {
      border-color: #d1d5db;
      transform: scale(1.05);
    }
  
    .thumbnail.active {
      border-color: #3b82f6;
      box-shadow: 0 0 0 1px #3b82f6;
    }
  
    .thumbnail img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  
    @media (max-width: 768px) {
      .image-preview-container {
        width: 85vw;
        min-width: auto;
      }
      
      /* ...existing code... */
    }
  
    @media (max-width: 480px) {
      .image-preview-container {
        width: 100vw;
      }
    }
  </style>


